<template>
	<th class="param-col" :selectedCell="selectedCell">
		<div class='param-name'>
			<input class="param-name-value"
				v-model="cellName"
				v-focus="paramNameFocus"
				@keypress="filterInvalidChars"
				@keyup.enter.prevent="changeName"
				@click.prevent="focusName"
				@blur="changeName"
				>
			<button class="param-setting" @click.stop="focusName">
				<i class='iconfont icon-editor'></i>
			</button>
		</div>
		<div class="param-type">
			<span class="data-type">{{ cellTypeLabel }}</span>
			<button class="param-setting"  @click.stop="showSettingPanel">
				<i class='iconfont icon-point3'></i>
			</button>
			<div class="setting-wrapper" v-show="selected === index">
				<ul class="setting-sub-list">
					<li class="setting-sub-li" v-for="(item, i) in types"
					@click.stop="changeType(i)"
					:item="item"
					:key="i">
					{{item.label}}
					</li>
				</ul>
			</div>
		</div>
	</th>
</template>
<script>
	import GButton from '@/components/common/g-button'

	const invalidCharacterPattern = /[\~\!\@\#\$\%\^\&\*\(\)\[\]\{\},\?，。]/;
	const types = [
		{
			'label': "文本",
			'value': "string"
		},
		{
			'label': "整数",
			'value': "long"
		},
		{
			'label': "小数",
			'value': "double"
		},
		{
			'label': "日期",
			'value': "date"
		},
		{
			'label': "布尔型",
			'value': "boolean"
		},
	];

	export default{
		name: 'param-col',
		props: {
			cell: null,
			range: Number,
			selectedCell: null,
			len: Number,
			columnNames: Array
		},
		directives: {
			focus: {
				inserted: function (el, bindings) {
					if (bindings.value) {
						el.focus();
					} else {
						el.blur();
					}
				},
				update: function(el, bindings) {
					if (bindings.value) {
						el.focus();
					} else {
						el.blur();
					}
				},
				componentUpdated: function(el, bindings) {
					if (bindings.value) {
						el.focus();
					} else {
						el.blur();
					}
				}
			}
		},
		data: function(){
			return {
				types,
				paramNameFocus: false,
				cellName: '',
				cellType: '',
				cellTypeLabel: '',
				selected: null,
				index: this.range
			}
		},
		mounted: function() {
			this.selected = this.selectedCell;
			this.cellName = this.cell.v;
			this.cellType = this.cell.t;
		},
		created: function() {
			this.$emit('select-cell', null);
		},
		watch: {
            selectedCell() {
                this.selected = this.selectedCell;
            },
			cellType() {
				switch (this.cellType) {
					case 'long':
						this.cellTypeLabel = '整数';
						break;
					case 'string':
						this.cellTypeLabel = '文本';
						break;
					case 'double':
						this.cellTypeLabel = '小数';
						break;
					case 'date':
						this.cellTypeLabel = '日期';
						break;
					case 'boolean':
						this.cellTypeLabel = '布尔型';
						break;
					default:
						this.cellTypeLabel = '文本';
				}
			}
        },
		methods: {

			showSettingPanel() {	// 显示设置面板

				this.$emit('select-cell', this.index);
				this.selected = this.index;
				// 绑定点击非设置区域，关闭设置区域事件
				document.removeEventListener('click', this.hideSettingPanel, true);
				document.addEventListener('click', this.hideSettingPanel, true);

			},

			changeType(i) {	// 更改字段类型

				this.cellType = this.types[i].value;
				this.selected = null;
			  	if(this.cell){
					this.$emit('change-param', this.cellName, this.cellType, this.index);
			  	}

			},

			focusName() {	// 改变“字段名称”为编辑状态

				this.paramNameFocus = true;
				this.selected = null;
			},

			changeName(evt) {	// 改变字段名称

				if (this.cellName === this.cell.v) {
					return;
				}

				this.paramNameFocus = false;
				let cellName = this.cellName.trim();

				let columnNamesArray = [];
				for (let columnName of this.columnNames) {
					columnNamesArray.push(columnName.v);
				}

				if (columnNamesArray.indexOf(cellName) !== -1) {
					this.cellName = (this.cell !== null && typeof this.cell === 'object') ?
						this.cell.v : this.cell;
					this.$message.error('字段名重复');
					return;
				}

				if (!this.cellName) {
					this.$message.error('字段名称不能为空');
					this.cellName = (this.cell !== null && typeof this.cell === 'object') ?
						this.cell.v : this.cell;
					return;
				}

				if(this.cellName && (this.cellName !== this.cell.v) && (this.cellName !== this.cell)) {
					this.$emit('change-param', cellName, this.cellType, this.index);
				}

			},

			hideSettingPanel() {

				if (this.selected || this.selected === 0) {
					this.selected = null;
				}

			},

			filterInvalidChars(evt) {
				let key = evt.key;
				if (invalidCharacterPattern.test(key)) {
					evt.preventDefault();
					return true;
				}
			}

		},
		components: {
			GButton
		}
	}
</script>
<style lang="scss">
	.hide {
		display: none;
	}
	.param-col{
		min-width: 120px;
		max-width: 260px;
		padding: 5px 5px 5px 10px;
		text-align: left;
		background: #f6f8fb;
		word-break:keep-all; /* for ie */
		white-space:nowrap;
		border-left:1px solid #e6e9f0;
		border-top:1px solid #e6e9f0;

		&:hover > .param-name > .param-setting {
			// display: block;
			opacity: 100;
		}

		.param-name {
			.param-name-value {
				width: calc( 100% - 19px);
				padding: 3px 5px;
				background: #f6f8fb;
				border: 1px solid rgba(0,0,0,0);

				&:focus{
					border: 1px solid #ccc;
					height: 25px;
					border-radius: 3px;
					background: #fff;
				}
			}
			.param-setting {
				color: #ccc;
				background-color: #f6f8fb;
				cursor: pointer;
				opacity: 0;

				&:hover{
					color: #4db3ff;
				}

				.iconfont{
					font-size: 18px;
				}
			}
		}

		.param-type {
			position: relative;
			.data-type{
				padding-left: 6px;
				font-size: 12px;
				color: #ccc;
				font-weight: lighter !important;
			}
			.setting-wrapper {
				position: absolute;
				background: #fff;
				box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
				border-radius: 3px;
				z-index: 10;
				top: 20px;
				left: 40px;
				width: 96px;

				.setting-sub-list {
					border-radius: 3px;
					width: 100%;

					.setting-sub-li {
						text-align: center;
						padding-top: 7px;
						height: 30px;
						cursor: pointer;
						background: #fff;
						color: #58B7FF;
						font-size: 12px;
						border-bottom: solid 1px #f6f8fb;
					}
				}

			}
			.param-setting {
				padding: 2px;
				color: #ccc;
				background-color: #f6f8fb;
				position: absolute;
				right: 0px;

				&:hover {
					color: #4db3ff;
					cursor: pointer;
				}

				.iconfont {
					font-size: 10px;
				}

			}
		}
	}
</style>
